<template>
  <el-dialog
    :title="title"
    v-model="visible"
    align-center
    width="600"
    @close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="true"
    :z-index="2000"
  >
    <el-form
      ref="formRef"
      :model="form"
      label-align="right"
      label-width="110"
      label-position="top"
      require-asterisk-position="right"
    >
      <el-row :gutter="21">
        <el-col :span="12">
          <el-form-item label="供应商名称" required>
            <el-input
              v-if="handleType == 'edit'"
              v-model="form.supplier_name"
              disabled
            ></el-input>
            <el-select
              v-else
              class="w-full"
              v-model="form.supplier_id"
              clearable
              placeholder="请选择"
              @change="changeSupplier"
            >
              <el-option
                v-for="item in supplier"
                :key="item.supplier_id"
                :label="item.supplier_name"
                :value="item.supplier_id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Lot number">
            <el-input v-model="form.lot_number" placeholder="请输入产品批号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Product name" required>
            <el-input v-model="form.product_name" placeholder="请输入产品认证名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="serial number">
            <el-input v-model="form.serial_number" placeholder="请输入产品序列号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="model">
            <el-input v-model="form.model" placeholder="请输入产品型号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="applicable age">
            <el-input v-model="form.applicable_age" placeholder="请输入适用地区" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Working voltage">
            <el-input v-model="form.working_voltage" placeholder="请输入产品电压" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商英文名（欧代">
            <el-input
              v-model="form.supplier_name_en"
              placeholder="请输入供应商英文名（欧代"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商英文地址(欧代)">
            <el-input
              v-model="form.supplier_addr_en"
              placeholder="请输入供应商英文地址(欧代)"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { reactive } from "vue";
const visible = ref(false);
let formData = reactive(inject("form"));
const emit = defineEmits(["close", "updateForm"]);
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },
  supplier: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
const statusMap = new Map([
  ["add", "新增"],
  ["edit", "编辑"],
]);

const handleType = ref("");
const title = ref("");
// 打开弹窗
const open = async (type, row) => {
  title.value = statusMap.get(type);
  handleType.value = type;
  initForm();
  visible.value = true;

  if (row) form.value = Object.assign({}, row);
};

let form = ref({
  name: "",
  lot_number: "",
  product_name: "",
  serial_number: "",
  model: "",
  applicable_age: "",
  working_voltage: "",
});

const initForm = () => {
  form.value = getForm();
};
// 初始化
const getForm = () => {
  return {
    name: "",
    lot_number: "",
    product_name: "",
    serial_number: "",
    model: "",
    applicable_age: "",
    working_voltage: "",
  };
};
// 关闭弹窗
const close = () => {
  visible.value = false;
};

const handleClose = () => {
  initForm();
  emit("close");
};

const changeSupplier = (val) => {
  const item = props.supplier.find((i) => i.supplier_id == val);
  if (item == undefined) return;
  form.value.supplier_name = item?.supplier_name;
};

// 提交
const save = () => {
  if (!form.value.supplier_id) {
    ElMessage.error("请选择供应商名称");
    return;
  }
  if (!form.value.product_name) {
    ElMessage.error("请输入Product Name");
    return;
  }
  emit("updateForm", form.value);
  close();
};

defineExpose({ open });
</script>
